<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的预约</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body,html{background-color:#efeff4;width: 100%;}
			.mui-bar~.mui-content .mui-fullscreen{top:44px;height:auto}
			.mui-pull-top-tips{position:absolute;top:-20px;left:50%;margin-left:-25px;width:40px;height:40px;border-radius:100%;z-index:1}
			.mui-bar~.mui-pull-top-tips{top:24px}
			.mui-pull-top-wrapper{width:42px;height:42px;display:block;text-align:center;background-color:#efeff4;border:1px solid #ddd;border-radius:25px;background-clip:padding-box;box-shadow:0 4px 10px #bbb;overflow:hidden}
			.mui-pull-top-tips.mui-transitioning{-webkit-transition-duration:.2s;transition-duration:.2s}
			.mui-pull-top-tips .mui-pull-loading{margin:0}
			.mui-pull-top-wrapper .mui-icon,.mui-pull-top-wrapper .mui-spinner{margin-top:7px}
			.mui-pull-bottom-tips{text-align:center;background-color:#efeff4;font-size:15px;line-height:40px;color:#777}
			.mui-pull-top-canvas{overflow:hidden;background-color:#fafafa;border-radius:40px;box-shadow:0 4px 10px #bbb;width:40px;height:40px;margin:0 auto}
			.mui-pull-top-canvas canvas{width:40px}
			.mui-slider-indicator.mui-segmented-control{background-color:#efeff4}
			.mui-segmented-control{background:#fff;border:none;border-bottom:1px solid #e1e0e0}
			.mui-segmented-control.mui-scroll-wrapper,.mui-segmented-control.mui-scroll-wrapper .mui-scroll{height:.95rem}
			.mui-segmented-control .mui-control-item{overflow:inherit;width:2.55rem;border-right:1px solid #e1e0e0;height:.95rem;line-height:.95rem;font-size:.28rem;color:#444;position:relative;padding:0;margin-left:-.082rem;border-left:0}
			.mui-segmented-control .mui-control-item:last-child{border-right:none}
			.mui-control-item>.arrow{width:.2rem;height:.2rem;display:block;background:url(../../images/work/arrow_gray.png) no-repeat;position:absolute;bottom:.3rem;right:.16rem}
			.mui-control-item.mui-active>.arrow{background:url(../../images/work/arrow_blue.png) no-repeat}
			.mui-segmented-control .mui-control-item.mui-active{color:#1653fc;background:#fff}
			.mui-control-item>.choose{width:.28rem;height:.33rem;display:block;background:url(../../images/work/icon-sxss-@2x.png) no-repeat;background-size:100% 100%;position:absolute;bottom:.31rem;right:.5rem}
			.mui-control-item.mui-active>.choose{background:url(../../images/work/icon-sxss-@2x01.png) no-repeat;background-size:100% 100%}
			.suggest_box{display:none;position:absolute;top:.97rem;left:0;width:7.8rem;background:rgba(0,0,0,.3);z-index:3;height:14rem}
			.suggest_list{position:absolute;top:0;left:0;width:7.5rem;background:#fff;padding:.1rem 0 .3rem 0;z-index:2}
			.suggest_list>ul{padding:0;margin:0;width:100%;float:left}
			.suggest_list>ul>li{width:7rem;text-align:left;float:right;height:.8rem;line-height:.8rem;border-bottom:1px solid #e8e8e8;padding-left:.13rem;box-sizing:border-box;font-size:.28rem;color:#333}
			.suggest_list>ul>li:last-child{border-bottom:none}
			.mui-segmented-control{overflow:visible}
			.suggest_list>ul>.sugg_active{color:#1653fc;background:url(../../images/work/choose-@2x.png) no-repeat;background-position:6.2rem center;background-size:.3rem auto}
			.mui-fullscreen .mui-segmented-control~.mui-slider-groups{top:.9rem}
			.bg_blue{background:#f8c96f}
			.bg_blue01{background:#79c3f7}
			.bg_green{background:#60e9e1}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem}
			.navigate_img>img{width:.25rem!important;margin:.09rem 0 0 .09rem}
			.mui-table-view .mui-media-body{width:6.2rem;float:left;overflow:visible}
			.mui-table-view .mui-media-body>div{width:100%;float:left}
			.mui-table-view .mui-media-body .body_view{font-size:.28rem}
			.mui-table-view .mui-media-body .body_view>span,.mui-table-view .mui-media-body .mui-ellipsis>span{float:left;width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
			.mui-table-view .mui-media-body .work_time{color:#b0b0b0;font-size:.22rem}
			.mui-table-view .mui-media-body .mui-ellipsis{color:#666;font-size:.22rem}
			.mui-table-view-cells{padding:0;margin-bottom:.15rem;background:#fff;position:sticky;z-index:-10}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left}
			.mui-table-view .mui-media-right{float:right;width:1.1rem;position:relative;height:100%}
			.mui-table-view .icon-more{width:.45rem;float:right;height:.45rem;position:relative;background:url(../../images/work/icon-gd-@2x.png) no-repeat;background-size:100% 100%}
			.mui-table-view .icon-more>img{margin-top:-.03rem}
			.mui-table-view-cells>a:not(.mui-btn){margin:0;padding:0}
			.mui-table-view .zhuangtai{width:1.2rem;float:left;text-align:right;font-size:.26rem;margin-top:-.07rem}
			.mui-push-right:after{content:""}
			.mui-table-view-cells:after{height:0}
			.evaluate{width:100%;height:.3rem;line-height:.3rem;font-size:.26rem;color:#666;text-align:center;float:left}
			.mui-table-view{background:0 0;position:sticky}
			.mui-sliders{position:absolute;height:100%;z-index:1;width:100%}
			.mui-sliders .mui-slider-groups{position:absolute;top:0;bottom:0;width:100%;height:auto}
			.mui-sliders .mui-slider-groups .mui-slider-item{position:relative;display:inline-block;width:100%;height:100%;vertical-align:top;white-space:normal}
			.more_message{width:7rem;top:.5rem;background:#fff;border-radius:.06rem;position:absolute;right:.25rem;z-index:5;border:1px solid #e2e2e2;display:none}
			.more_message .more_message_box{position:relative;width:100%;float:left;padding:.35rem .38rem;box-sizing:border-box}
			.more_message .more_message_box>i{width:.2rem;height:.2rem;position:absolute;top:-.15rem;right:.15rem;background:url(../../images/work/arrow_up.png) no-repeat}
			.bg_gray{width:7.5rem;background:rgba(0,0,0,.3);height:100%;position:fixed;top:-.9rem;z-index:3;right:0}
			.mui-icon-trash{font-size:.4rem;color:#8c8c8c;float:left;margin-right:.05rem}
			.message_info{font-size:.28rem}
			.mui-popover{height:120px}
			.mui-pull-bottom-pocket,.mui-pull-top-pocket{visibility:visible}
			.mui-scroll-wrapper{width: 100%!important;padding: 0!important;}
		</style>
	</head>

	<body>
		<div id="scroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view" id="mui-table-view">
					<li class="mui-table-view-cells mui-media" v-for="onlineBooking in myOnlineBookingList">
						<div class="mui-media-box">
							<span class="navigate_img bg_green">
								<img class="tjfwl" :src="onlineBooking.serviceFwztSrc">
								</span>
							<div class="mui-media-body">
								<div class="body_view">
									<span :id="onlineBooking.serviceOid">{{onlineBooking.serviceName}}</span>
									<div class="icon-more" :data-guid="onlineBooking.oid" :id="onlineBooking.oid" :bespeakStatus="onlineBooking.bespeakStatus" :phoneNum="onlineBooking.phoneNum"></div>
								</div>
								<div class="work_time">预约时间：{{onlineBooking.bookingDay}} {{onlineBooking.bookingTime}}</div>
								<div class='mui-ellipsis'>
									<span>受理机构: {{onlineBooking.locationName}}</span>
									<div :class="onlineBooking.blStatusColor">{{onlineBooking.bespeakStatusVal}}</div>
								</div>
							</div>
						</div>
						<div class="evaluate"></div>
					</li>
				</ul>
			</div>
		</div>
		<!--弹层-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view" id="middlePopoverUl">
					</ul>
				</div>
			</div>

		</div>
		<script>
			function my_immersed(immersed) {}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/app.js"></script>

		<script>
			var pageNumber = 0; //当前页码
			var pageSize = 5; //每页显示的条数
			var maxPageNumber = 1; //最大页数

			mui.init({
				pullRefresh: {
					container: "#scroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等					
					up: { //上拉加载
						contentrefresh: '正在加载...',
						auto: true, //可选,默认false.自动上拉加载一次
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullupRefresh
					}
				}
			});

			var news = new Vue({
				el: '#mui-table-view',
				data: {
					myOnlineBookingList: []
				}

			});

			/**
			 * 上拉加载页面数据
			 */
			function pullupRefresh() {
				setTimeout(function() {
					pageNumber++; //翻下一页
					if(pageNumber <= maxPageNumber) {
						loadMore(pageNumber, pageSize); //具体取数据的方法
					} else {
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}, 100);
			}
           
			function loadMore(pageNumber, pageSize) {
				var param = 'userId='+getUserId()+'&pageNumber=' + pageNumber + '&random=' + Math.random() + '&pageSize=' + pageSize;
				var url = 'appHttpService/appUserCenterOnlineBookingList.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.code == 2) {
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					} else if(data.code == 0) {
						maxPageNumber = data.maxPageNumber;
						var rows = JSON.parse(data.result);
						if(rows != null && rows.length>0) {
							news.myOnlineBookingList = news.myOnlineBookingList.concat(convert(rows));
							if(rows.length < pageSize) {
								mui('#scroll').pullRefresh().endPullupToRefresh(true);
							}else{
								mui('#scroll').pullRefresh().endPullupToRefresh(false);
							}
						} else {
							mui('#scroll').pullRefresh().endPullupToRefresh(true);
						}
					}
				}, param);

			};

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						oid: item.oid,
						bespeakStatus: item.bespeakStatus,
						bespeakStatusVal: getBespeakStatusVal(item.bespeakStatus),
						blStatusColor: getColor(item.bespeakStatus),
						code: item.code,
						bookingDay:  item.bookingDay ? ( new Date(item.bookingDay.replace(/\-/g, "/")).getDateStr(3) ) : ' */*/*',
						bookingTime: item.bookingTime,
						phoneNum: item.phoneNum,
						locationName: item.sxHandleLocation.locationName,
						serviceOid: item.sxService.serviceOid,
						serviceName: item.sxService.serviceName,
						serviceFwztSrc: getServiceFwztSrc(item.sxService.subjectClassificationCode)
					});
				});
				return newItems;
			}

			/**
			 * 获取服务事项的服务主题显示
			 */
			function getServiceFwztSrc(subjectClassificationCode) {
				var src = "../../images/index/tjfw1-@2x.png";
				/*if(subjectClassificationCode != null && subjectClassificationCode != '' && subjectClassificationCode != undefined){
					src = '';
				}*/
				return src;
			}

			/**
			 * 加载数据后调用点击的方法
			 */
			function getBespeakStatusVal(bespeakStatus) {
				var bespeakStatusVal = "";
				if(bespeakStatus == 1) {
					bespeakStatusVal = "已取消";
				} else if(bespeakStatus == 3) {
					bespeakStatusVal = "已失效";
				} else if(bespeakStatus == 2) {
					bespeakStatusVal = "已办结";
				} else if(bespeakStatus == 0) {
					bespeakStatusVal = "预约中";
				}
				return bespeakStatusVal;
			}

			function getColor(bespeakStatus) {
				var color = "zhuangtai";
				if(bespeakStatus == 0) { //"0":"预约中"
					color = "zhuangtai orange";
				} else if(bespeakStatus == 2) { //"2":"已办结"
					color = "zhuangtai blue";
				}
				return color;
			}

			//点击数据弹出操作按钮菜单
			mui('body').on('tap', '[data-guid]', function() {

				var id = this.getAttribute('id');
				var bespeakStatus = this.getAttribute('bespeakStatus');
				var phoneNum = this.getAttribute('phoneNum');
				loadMiddlePopoverUl(id, bespeakStatus,phoneNum);
				mui('#middlePopover').popover('toggle', document.getElementById(id));
			});

			/**
			 * 加载弹出菜单中的参数值
			 * @param {Object} id
			 * @param {Object} bespeakStatus
			 * @param {Object} phoneNum
			 */
			function loadMiddlePopoverUl(id, bespeakStatus,phoneNum) {
				if(bespeakStatus == 0) {
					//设置弹出菜单的高度，若高度太低内容太多的话 会遮挡住箭头
					document.getElementById("middlePopover").style.height = 50 * 3 + "px";
					var tempHtml = '';
					for(var i = 0; i < 3; i++) {
						var name = "";
						if(i == 0){
							name = "查看详情";
							tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='1'>"+name+"</a></li>";
						}else if(i == 1){
							name = "重发短信";
							tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='2' phoneNum='"+phoneNum+"'>"+name+"</a></li>";
						}else if(i == 2){
							name = "取消预约";
							tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='3'>"+name+"</a></li>";
						}
					}
					document.getElementById("middlePopoverUl").innerHTML = tempHtml;
				} else {
					document.getElementById("middlePopover").style.height = 50 + "px";
					document.getElementById("middlePopoverUl").innerHTML = "<li class='mui-table-view-cell'><a id="+id+" type='1'>查看详情</a></li>";
				}
			}
			
			mui('#middlePopoverUl').on('tap', 'a', function() {
				var type = this.getAttribute('type');
				var oid = this.getAttribute('id');
				if(type == 1){
				  //查看预约详细信息
				  showTemplates('my_onlineBooking_detail.html','预约详情','../my/my_onlineBooking_detail.html?oid='+oid);
			     //隐藏弹框
			     mui('#middlePopover').popover('hide');	
				}else if(type == 2){
				  //重发短信
				  var phoneNum = this.getAttribute('phoneNum');
				  var param = 'oid=' + oid +'&phone=' + phoneNum;
				  utils.ajax('appHttpService/appOnlineBookingSend.do', function(data) {			  	
				  	data = JSON.parse(data);
					if(data.code == 0) {						
						mui.toast("短信重发成功");						
				  	}else{
				  		mui.toast("短信重发失败");
				  	}	
				  	//隐藏弹框
				   mui('#middlePopover').popover('hide');	
				  }, param);
				}else if(type == 3){
				  //取消预约
				   var param = 'oid=' + oid; 
				    utils.ajax('appHttpService/appUserCenterCancelOnlineBooking.do', function(data) {			  	
				  	data = JSON.parse(data);
					if(data.code == 0) {
						mui.toast("取消成功");
						//取消成功后,重新加载
						pageNumber = 0;
						//移除原有数据
						news.myOnlineBookingList = [];
						pullupRefresh();
				  	}else{
				  		mui.toast("取消失败");
				  	}
				   //隐藏弹框
				   mui('#middlePopover').popover('hide');	
				  }, param);
				   
				}
			});
			
			/**
             * 查看办事详情页面
             */
			mui("body").on('tap','.body_view span',function(){
            	utils.showWaiting();
            	var hsw = openNewWin('_www/src/work/bszn_info.html?serviceOid=' + this.getAttribute("id"),{bounce:'none'}, 'bszn_info');
            	mui.fire(hsw,'getDetail',{serviceOid:this.getAttribute("id")});
            })
		</script>
	</body>

</html>